<!--To view the diagrams first run the "bundle:graphql" script in "../package.json" -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>GraphQL Syntax Diagrams</title>
  </head>

  <body>
    <!-- https://stackoverflow.com/a/14738668 -->
    <iframe
      id="innerFrame"
      src=""
      style="
        position: fixed;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
        border: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        z-index: 999999;
      "
    >
    </iframe>
  </body>

  <script type="module">
    import {
      GraphQLParser,
      createSyntaxDiagramsCode
      // extract the serialized grammar.
    } from "./gen/graphql-bundled.min.mjs" // created by "bundle:graphql" script.

    // extract the serialized grammar.
    var parserInstance = new GraphQLParser([])
    var serialziedGrammar = parserInstance.getSerializedGastProductions()

    // create the HTML Text
    var htmlText = createSyntaxDiagramsCode(serialziedGrammar)
    var innerFrame = document.getElementById("innerFrame")

    // Update the iframe src to visually render the diagrams.
    // https://stackoverflow.com/questions/10418644/creating-an-iframe-with-given-html-dynamically/10419102#10419102
    innerFrame.src = "data:text/html;charset=utf-8," + encodeURI(htmlText)
  </script>
</html>
